<template>
	<view class="form-container">
		<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="180px" ref="ruleForm" :labelStyle="{
          height: '64rpx',
          fontSize: '28rpx'
        }">
            <u-form-item label="所属车间" borderBottom ref="item1">
                <view class="text-right font-size-14 width-100-percentage">{{ ruleForm.workshopName }}</view>
            </u-form-item>
            <u-form-item label="机台锭组" prop="machineName" labelPosition="top" borderBottom ref="item1">
                <view class="flex-start-center-wrap">
                    <view v-for="item in tableData" :key="item" style="padding: 2rpx;width: calc(100% / 3);box-sizing: border-box;">
                        <u-tag :text="`${item.machineName}(${item.startSpinNumber}~${item.endSpinNumber})`" plain></u-tag>
                    </view>
                </view>
            </u-form-item>
			<u-form-item label="生产产品" borderBottom ref="item1">
				<view class="text-right font-size-14 width-100-percentage">{{ ruleForm.productName }}</view>
			</u-form-item>
			<u-form-item label="生产批号" borderBottom ref="item1">
				<view class="text-right font-size-14 width-100-percentage">{{ ruleForm.batchCode }}</view>
			</u-form-item>
			<u-form-item labelWidth="120px" label="通知单号" borderBottom ref="item1">
				<view class="text-right font-size-14 width-100-percentage">{{ ruleForm.prdNoticeCode }}</view>
			</u-form-item>
            <u-form-item label="纸管颜色" prop="machineName" labelPosition="top" borderBottom ref="item1">
                <view @click.capture="onSelectColorBtn" class="flex-start-center-wrap">
                    <view v-for="item in ruleForm.paperTubeList" :key="item" style="padding: 2rpx;width: calc(100% / 3);box-sizing: border-box;">
                        <u-tag style="width: calc(100% / 4);" :text="item.name" plain></u-tag>
                    </view>
                    <u-tag text="选择"></u-tag>
                </view>
            </u-form-item>
		</u-form>
		<view class="margin-top-30">
			<u-button @click="onConfirmBtn" color="#2d8cf0" :loading="confirmLoading" size="large">确定</u-button>
		</view>
		<jk-popup :show="showXsPopup" title="纸管颜色" @close="onCloseXsPopup">
			<u-checkbox-group v-model="colorIds" size="21" iconPlacement="right" placement="column"
				:borderBottom="true" @change="onXsCheckboxChange">
				<view style="height: 400px;overflow: auto;">
					<u-checkbox v-for="item in tubeColorList" :key="item.id" labelSize="18" iconSize="20"
						:borderBottom="true" :customStyle="{
                    margin: '8rpx',
                }" :label="item.name" :name="item.id" style="margin: 10rpx;"></u-checkbox>
				</view>
			</u-checkbox-group>
		</jk-popup>
	</view>
</template>

<script>
import {
    productionPrdNoticeGet,
    productionPrdNoticeLtMachineChangeCreate,
    productionPrdNoticeLtMachineChangeCreateBatch,
    spinTubeColorPage,
} from "../../../../api";
	import {
		showLoading
	} from "../../../../utils/jk-utils";
	import jkPopup from '../../../../jk-components/jk-popup/index';
	export default {
		components: {
			jkPopup
		},
		data() {
			return {
                colorIds: [],
				confirmLoading: false,
				showXsPopup: false,
				tubeColorList: [],
				dataId: null,
                tableData: [],
				ruleForm: {
                    paperTubeList: [], // 纸管颜色
					workshopId: null,
					workshopName: ''
				},
				rules: {
					machineName: {
						type: 'string',
						required: true,
						message: '请填写设备',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(e) {
			this.dataId = e.id;
		},
		onShow() {
		    this.tableData = getApp().globalData.ltSelectMachineGroup;
			this.getDependentData();
		},
		methods: {
		    onSelectColorBtn() {
		        this.showXsPopup = true;
            },
			onConfirmBtn() {
				this.confirmLoading = true;
				let params = JSON.parse(JSON.stringify(this.ruleForm));
				let arr = this.tableData.map(x => {
				    return {
				        ...x,
                        ...this.ruleForm
                    };
                });
                productionPrdNoticeLtMachineChangeCreateBatch(arr).then(res => {
					this.confirmLoading = false;
					if (res.data.status === 200) {
                        wx.reLaunch({
                            url: '/pages/production/ltPrd/machineList/index'
                        });
						uni.showToast({
							title: '保存成功!'
						});
					}
				})
			},
			onXsCheckboxChange(e) {
				this.ruleForm.paperTubeList = [];
				e.forEach(x => {
					this.tubeColorList.forEach(k => {
						if (x === k.id) {
                            this.ruleForm.paperTubeList.push({
                                id: k.id,
                                name: k.name
                            });
						}
					})
				})
			},
			onCloseXsPopup() {
				this.showXsPopup = false;
			},
			// 细纱管颜色
			getColorListRequest() {
				return spinTubeColorPage({
					typeCode: "TUBE_COLOR"
				}).then(res => {
					if (res.data.status === 200) {
						this.tubeColorList = res.data.res;
					}
				})
			},
			getDetailRequest() {
				return productionPrdNoticeGet({
					id: this.dataId
				}).then(res => {
					if (res.data.status === 200) {
						let resData = res.data.res;

                        this.$set(this.ruleForm, 'workshopId', resData.workshopId);
                        this.$set(this.ruleForm, 'workshopCode', resData.workshopCode);
                        this.$set(this.ruleForm, 'workshopName', resData.workshopName);
                        this.$set(this.ruleForm, 'prdNoticeId', resData.id);
                        this.$set(this.ruleForm, 'prdNoticeCode', resData.code);
                        this.$set(this.ruleForm, 'productOrderId', resData.orderIssued.order.id);
                        this.$set(this.ruleForm, 'productOrderCode', resData.orderIssued.order.code);
                        this.$set(this.ruleForm, 'productId', resData.productId);
                        this.$set(this.ruleForm, 'productCode', resData.productCode);
                        this.$set(this.ruleForm, 'productName', resData.productName);
                        this.$set(this.ruleForm, 'productModels', resData.productModels);
                        this.$set(this.ruleForm, 'batchId', resData.batchId);
                        this.$set(this.ruleForm, 'batchCode', resData.batchCode);
                        this.$set(this.ruleForm, 'paperTubeList', resData.paperTubeList || []);
                        this.colorIds = resData.paperTubeList ? resData.paperTubeList.map(x => x.id) : [];
					}
				})
			},
			async getDependentData() {
				showLoading(true);
				await this.getColorListRequest();
				if (this.dataId) await this.getDetailRequest();
				showLoading(false);
			}
		}
	}
</script>

<style>

</style>
<style lang="scss" scoped>
	.machine-title {
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 12rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		background: #2d8cf0;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		margin: 10rpx;
	}

	.form-container {
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
	}

	.popup-content-box {
		padding: 32rpx;

		.popup-content-box-title {
			font-size: 34rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>
